<template>
	<view class="mine-container" :style="{height: `${windowHeight}px`}">
		<!--顶部个人信息栏-->
		<view class="header-section">
			<view class="flex padding justify-between">
				<view class="flex align-center">
					<view v-if="!avatar" class="cu-avatar xl round bg-white">
						<view class="iconfont icon-people text-gray icon"></view>
					</view>
					<!-- <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
          </image> -->
					<view v-if="!name" @click="handleToLogin" class="login-tip">
						点击登录
					</view>
					<view v-if="name" @click="handleToInfo" class="user-info">
						<view class="u_title">
							用户名：{{ name }}</br>
							<span style="font-size: 30rpx;">{{ sno != null?'学号：'+sno:'部门:'+dpName}}</span>
						</view>
					</view>
				</view>
				<view @click="handleToInfo" class="flex align-center">
					<text>个人信息</text>
					<view class="iconfont icon-right"></view>
				</view>
			</view>
		</view>

		<view class="content-section">
			<view class="mine-actions grid col-4 text-center">
			</view>

			<view class="menu-list">
				<view class="list-cell list-cell-arrow" @click="handleToEditInfo" v-if="this.isUser != 'Teacher' ">
					<view class="menu-item-box">
						<view class="iconfont icon-user menu-icon"></view>
						<view>编辑资料</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleToPwd">
					<view class="menu-item-box">
						<view class="iconfont icon-password menu-icon"></view>
						<view>修改密码</view>
					</view>
				</view>
				<!-- 				<view class="list-cell list-cell-arrow" @click="handleAbout">
					<view class="menu-item-box">
						<view class="iconfont icon-aixin menu-icon"></view>
						<view>关于我们</view>
					</view>
				</view> -->
				<!-- <view class="list-cell list-cell-arrow" @click="handleToSetting">
					<view class="menu-item-box">
						<view class="iconfont icon-setting menu-icon"></view>
						<view>应用设置</view>
					</view>
				</view> -->
				<view class="list-cell list-cell-arrow" @click="handleCleanTmp">
					<view class="menu-item-box">
						<view class="iconfont icon-setting menu-icon"></view>
						<view>清除缓存</view>
					</view>
				</view>
			</view>

		</view>

		<view class="menu-list">
			<u-button type="error" style="height:50px;" text="退出登录" @click="handleLogout" />
		</view>
	</view>
</template>

<script>
import storage from "@/utils/storage";
import { getUser, getLoginPeople } from "@/utils/auth";
import { listNoticeAll, listNoticeTeacherAll } from "@/api/client/notice.js";

export default {
  data() {
    return {
      name: null,
      sno: null,
      dpName: null,
      Countmeal: 0,
      version: getApp().globalData.config.appInfo.version,
      user: null,
      isUser: null,
    };
  },
  created() {
    var ret = getLoginPeople();
    this.isUser = getLoginPeople();
    this.user = getUser();
    if (ret == "Teacher") {
      this.name = this.user.userName;
      this.dpName = this.user.dept.deptName;
    } else {
      this.name = this.user.name;
      this.sno = this.user.sno;
    }
  },
  computed: {
    avatar() {
      return this.$store.state.user.avatar;
    },
    windowHeight() {
      return uni.getSystemInfoSync().windowHeight - 50;
    },
  },
  methods: {
    handleToInfo() {
      this.$tab.navigateTo("/pages/mine/info/index");
    },
    handleToEditInfo() {
      this.$tab.navigateTo("/pages/mine/info/edit");
    },
    handleToSetting() {
      this.$tab.navigateTo("/pages/mine/setting/index");
    },
    handleToLogin() {
      this.$tab.reLaunch("/pages/login");
    },
    handleToAvatar() {
      this.$tab.navigateTo("/pages/mine/avatar/index");
    },
    handleLogout() {
      this.$modal.confirm("确定退出系统吗？").then(() => {
        this.$store.dispatch("LogOut").then(() => {
          this.$tab.reLaunch("/pages/index");
        });
      });
    },
    handleToPwd() {
      this.$tab.navigateTo("/pages/mine/pwd/index");
    },
    handleBuilding() {
      this.$modal.showToast("模块建设中~");
    },
    handleSystemNotification(e) {
      uni.navigateTo({
        url: "/pages/mine/notification/index",
      });
    },
    handleCleanTmp() {
      uni.showModal({
        title: "提示",
        content: "确定清除全部缓存吗? (注：清除缓存后，需要重新登录)",
        success: function (res) {
          if (res.confirm) {
            uni.clearStorageSync();
            uni.showToast({
              title: "清除成功",
              icon: "none",
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f5f6f7;
}

.mine-container {
  width: 100%;
  height: 100%;

  .header-section {
    padding: 15px 15px 15px 15px;
    background-color: #3c96f3;
    color: white;

    .login-tip {
      font-size: 18px;
      margin-left: 10px;
    }

    .cu-avatar {
      border: 2px solid #eaeaea;

      .icon {
        font-size: 40px;
      }
    }

    .user-info {
      margin-left: 15px;

      .u_title {
        font-size: 18px;
        line-height: 30px;
      }
    }
  }

  .content-section {
    position: relative;
    top: -50px;

    .mine-actions {
      margin: 15px 15px;
      padding: 20px 0px;
      border-radius: 8px;
      // background-color: white;

      .action-item {
        .icon {
          font-size: 28px;
        }

        .text {
          display: block;
          font-size: 13px;
          margin: 8px 0px;
        }
      }
    }
  }
}
</style>